/*
 * @Author: ZARR 
 * @Date: 2018-05-16 10:02:31 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-05-16 10:21:49
 * 使用说明：
 * 1.产生动画：条件class名为 animated 
 * 2.移动端换背景：需要换背景图片className=back 额外参数mBack=背景url 
 * 3.移动端换图片：需要更换图片的额外参数mSrc=图片url
 * 4.设定headerbar，给headerbar加一个id
 */

(function ($) {
    $.fn.extend({
        isShowMobileBack(){
            if (this.isMobile()){
                this.css('background-image', `url('${this.attr('mBack')}')`);
            }
            return this; //让jquery能链式调用
        },
        isMobile(){
            return 'ontouchstart' in document;
        },
        isShowMobileImg(){
            if (this.isMobile()) {
                this.attr('src', this.attr('mSrc')); //判断是否是移动端，如果是的话就修改相应的src
            }
            return this;
        },
        controllHeader(){
            $(window).scroll(() => {
                var windowScrollTop = $(window).scrollTop();
                if(windowScrollTop > 60)
                {
                   this.css({'position': 'fixed', 'top': '0px'});
                }
                else
                {
                   this.css({'position': 'static'});
                }
            });
            var flag = 0;
            $('.icon-xiangxiajiantou').click(function(){
                 if(flag == 0){
                      $(this).addClass('beClicked');
                      $('#hideMenu').addClass('open');
                 }else{
                      $(this).removeClass('beClicked');
                      $('#hideMenu').removeClass('open');
                 }
                 flag = !flag;
            })
        }
    })
})(jQuery);

(()=>{

    function Animate(option) {
        this.lastDistanceIndex = -1;
        this.distance = []; //元素距离文档顶部的距离数组
        this.animatedHeight = [] //获取动画元素的高度
        this.animated = $('.animated'); //获取所有需要使用动画的dom节点
        this.finallyHeight = $(window).height() - option.height // 距离视口下面100px之后才显示
        this.init();
    }

    Animate.prototype = {
         constructor: Animate,

         init(){
             this.animated.each((index, ele) => {
                 this.distance.push($(ele).offset().top);
                 this.animatedHeight.push($(ele).height());
             })
             
             for (var i = 0; i < this.distance.length; i++) {
                 if (this.distance[i] + this.animatedHeight[i]< this.finallyHeight) {
                     this.lastDistanceIndex = i;
                     this.addAnimateClass(this.lastDistanceIndex);
                 }
             }

             $(window).scroll(() => {
                 var windowScrollTop = $(window).scrollTop();
                 for (var i = 0; i < this.distance.length; i++) {
                     if (windowScrollTop + this.finallyHeight > this.distance[i] + this.animatedHeight[i] && i > this.lastDistanceIndex) {
                         this.lastDistanceIndex = i;
                         this.addAnimateClass(this.lastDistanceIndex);
                     }
                 }
             })
         },

         addAnimateClass(pos){
             var active = this.animated.eq(this.lastDistanceIndex)
             active.addClass(`${active.attr('ani-animated')}`);
         }
    }

     window.Animate = Animate;
})()


$(()=>{
    
    const option = { height: 100 }; //100 是控制距离
    new Animate(option); //监听滚动事件，并且添加动画css
    $('.back').isShowMobileBack(); //移动端换背景
    $('.needMobileSrc').isShowMobileImg(); //移动端换图片src
    $('#headerBar').controllHeader(); //添加headerBar置顶
    
})
